<template>
    <aside class="font-attribute__wrap m-b" v-show="isHidden">
        <!-- <h4 class="action-item__title no-select m-b">字体样式</h4> -->
        <div class="font-item">
            <!-- <h5 class="title cus-font">字体</h5> -->
            <section class="select-size">
                <n-popover 
                    style="width: 180px;max-height: 500px;" 
                    scrollable 
                    trigger="click" 
                    placement="left-start">
                    <template #trigger>
                        <n-button tertiary type="primary" size="small">{{ elementAttr.fontFamily || '默认字体'}}&nbsp;></n-button>
                    </template>
                    <ul class="customize-popover-group">
                        <li 
                            class="font-item" 
                            :style="{ fontFamily: item.value }" 
                            v-for="(item, index) in fontOptions" 
                            :key="index"
                            @click.stop="handleUpdateValue(item.value)"
                            >{{ item.label }}</li>
                    </ul>
                </n-popover>
            </section>
        </div>
        <div class="font-item">
            <h5 class="title">字体大小</h5>
            <section class="select-size">
                <n-input-number
                    size="small"
                    :min="12"
                    :max="1000"
                    v-model:value="elementAttr.fontSize"
                    placeholder="请输入"
                    :on-update:value="onNumberUpdate"
                />
            </section>
        </div>
        <div class="font-item">
            <h5 class="title">水平间距</h5>
            <section class="select-size">
                <n-input-number
                    size="small"
                    :min="0"
                    :max="10000"
                    step="100"
                    v-model:value="elementAttr.charSpacing"
                    placeholder="请输入"
                    :on-update:value="onNumberCharUpdate"
                />
            </section>
        </div>
        <div class="font-item">
            <h5 class="title">行间距</h5>
            <section class="select-size">
                <n-input-number
                    size="small"
                    :min="1"
                    :max="1000"
                    v-model:value="elementAttr.lineHeight"
                    placeholder="请输入"
                    :on-update:value="onLineHeightUpdate"
                />
            </section>
        </div>
        <div class="font-item">
            <h5 class="title">填充色</h5>
            <input
                class="color-input__picker cursor"
                v-model="elementAttr.fill"
                type="color"
                list=""
                @input="onChangeFillColor"
            />
        </div>
        <div class="font-item">
            <h5 class="title">边框颜色</h5>
            <input
                class="color-input__picker cursor"
                v-model="elementAttr.stroke"
                type="color"
                list=""
                @input="onChangeColor"
            />
        </div>
        <div class="font-item">
            <h5 class="title">背景色</h5>
            <input
                class="color-input__picker cursor"
                v-model="elementAttr.textBackgroundColor"
                type="color"
                list=""
                @input="onChangeBgColor"
            />
        </div>
        <div class="font-item">
            <n-tooltip v-for="(item, index) in customFonts" :key="index" placement="bottom" trigger="hover">
                <template #trigger>
                    <span
                        :class="['font-property cursor', { 'is-active': item.isActive }]"
                        @click="setAttributes(item, item.key, item.value)"
                    >
                        <i :class="[`${item.icon}`]"></i>
                    </span>
                </template>
                <span>{{ item.textTip }}</span>
            </n-tooltip>
        </div>
    </aside>
</template>

<script setup name="FontAttribute">
import useSharedCore from "@/hooks/shared";
import { SYS_FONTS} from '../config/fonts';
import { config } from "../config/editor";

const { coverEditor, mixinState } = useSharedCore();
const { fontStyles, textAlignment } = config;

const customFonts = ref(fontStyles);
const filterType = ["i-text", "text", "textbox"];
const elementAttr = reactive({
    fontFamily: '',
    fontSize: 30,
    textBackgroundColor: "#4A54FF",
    stroke: "#18a058",
    charSpacing: 1,
    lineHeight: 1.5,
    fill: '#eeeeee'
})

const fontOptions = ref([...SYS_FONTS]);


const handleUpdateValue = (val) => {
    const findItem = fontOptions.value.find(el => el.value === val)
    if (findItem) elementAttr.fontFamily = findItem.label
    updateRender("fontFamily", val);
}

function onChangeFillColor(params) {
    const { value = "#fff" } = params.target;
    updateRender("fill", value);
}
function onChangeBgColor(params) {
    const { value = "#fff" } = params.target;
    updateRender("textBackgroundColor", value);
}

function onChangeColor(params) {
    const { value = "#18a058" } = params.target;
    updateRender("stroke", value);
}

function onLineHeightUpdate(val) {
    elementAttr.lineHeight = val;
    updateRender("lineHeight", elementAttr.lineHeight);
}

function onNumberCharUpdate(val) {
    elementAttr.charSpacing = val;
    updateRender("charSpacing", elementAttr.charSpacing);
}

function onNumberUpdate(val) {
    elementAttr.fontSize = val;
    updateRender("fontSize", elementAttr.fontSize);
}

// 统一修改图层样式，图片，文本等等
function setAttributes(item, key, value) {
    item.isActive = !item.isActive;
    updateRender(key, value);
}

function updateRender(key, value) {
    const node = coverEditor?.canvas?.getActiveObject() || null;
    let finalValue = value;
    if (key === "underline") {
        finalValue = !node.underline;
    }
    // 文本倾斜
    if (key === "fontStyle") {
        finalValue = node.fontStyle == "normal" ? value : "normal";
    }
    // 文本加粗
    if (key === "fontWeight") {
        finalValue = node.fontWeight == "normal" ? value : "normal";
    }
    node.set({ [key]: finalValue });
    coverEditor.canvas.renderAll();
}

const isHidden = computed(() => {
    return filterType.includes(mixinState.mSelectOneType);
});

const getActiveObjectAttr = (params) => {
    // 当选择文本对象时，需要回显已选中的文本属性
    const active = coverEditor.canvas.getActiveObject()
    if (!active) return
    if (filterType.includes(active.type)) {
        const findItem = fontOptions.value.find(el => el.value === active.get('fontFamily'))
        if (findItem) elementAttr.fontFamily = findItem.label
        elementAttr.fontSize = active.get('fontSize')
        elementAttr.textBackgroundColor = active.get('textBackgroundColor') || "#4A54FF"
        elementAttr.stroke = active.get('stroke') || '#18a058'
        elementAttr.charSpacing = active.get('charSpacing')
        elementAttr.lineHeight = active.get('lineHeight')
        elementAttr.fill = active.get('fill')
    }
};

onMounted(() => {
    coverEditor.on("selectOne", getActiveObjectAttr);
});
onBeforeUnmount(() => {
    coverEditor.off("selectOne", getActiveObjectAttr);
});
</script>

<style lang="scss">
.customize-popover-group {
    .font-item {
        padding: 1px 3px;
        border-radius: 4px;
        font-size: 16px;
        // font-weight: bold;
        &:hover {
            cursor: pointer;
            background: $activeBgColor;
            color: $activeColor;
        }
    }
}

.font-attribute__wrap {
    font-size: 14px;
    .font-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 10px;
        .select-size {
            flex: 1;
        }
        .title {
            margin-right: 4px;
            &.cus-font {
                font-size: 20px;
                font-family: "KaiTi";
                font-weight: bold;
            }
        }
        input[type="color"] {
            // border: none;
            // background: none;
            // -webkit-appearance: none;
            // appearance: none;
            border-width: 0px;
            // border-style: none;
            outline: none;
            border-radius: 3px;
        }
    }
    .font-property {
        padding: 0 8px;
        margin: 0 2px;
        border-radius: 4px;
        &.is-active {
            color: #eee;
            background: $activeColor;
        }
    }
}
</style>
